<template>
  <div class="app-container">
    <div style="width: 60vw">
      <!--  :rules="baseInfoRules" -->
      <el-form :model="baseInfo" ref="baseInfo">
        <el-form-item
          prop="share_title"
          :label-width="labelWidth"
          label="是否同步平台产品"
        >
          <el-radio-group v-model="baseInfo.is_sync_spec" size="large">
            <el-radio-button :label="1">同步</el-radio-button>
            <el-radio-button :label="2">不同步</el-radio-button>
          </el-radio-group>
          <span style="margin-left: 30px; color: #f00"
            >如果不需要平台的任何产品可以选择不同步，这样我们平台后续上架的产品将不会同步上架到你的公众号,默认同步</span
          >
        </el-form-item>
        <el-form-item :label-width="labelWidth" label="客服二维码">
          <!-- <el-image v-if="baseInfo.contact_url_show" :src="baseInfo.contact_url_show"></el-image> -->
          <ImageUpload
            :uploadImgUrl="uploadImgUrl"
            v-model:value="baseInfo.contact_url_show"
            @input="
              (res) => {
                this.imgSuccess('contact', res);
              }
            "
            :limit="1"
          >
            <!-- :extParams="{ appid: $store.getters.curMpInfo.appid }" -->
            <template #tip>
              <div class="el-upload__tip">
                只能上传jpg,png,jpeg,gif文件，且不超过500kb
              </div>
            </template>
          </ImageUpload>
          <span>支持png、jpeg、jpg,gif格式</span>
          <!-- </el-form-item> -->
          <!-- </template> -->
        </el-form-item>
        <el-form-item :label-width="labelWidth" label="关注公众号二维码">
          <ImageUpload
            :uploadImgUrl="uploadImgUrl"
            v-model:value="baseInfo.follow_url_show"
            @input="
              (res) => {
                this.imgSuccess('follow', res);
              }
            "
            :limit="1"
          >
            <!-- :extParams="{ appid: $store.getters.curMpInfo.appid }" -->
            <template #tip>
              <div class="el-upload__tip">
                只能上传jpg,png,jpeg,gif文件，且不超过500kb
              </div>
            </template>
          </ImageUpload>
          <span>支持png、jpeg、jpg,gif格式</span>
          <!-- </el-form-item> -->
          <!-- </template> -->
        </el-form-item>
        <el-form-item :label-width="labelWidth" label="公众号分享图标">
          <!-- <el-image v-if="baseInfo.contact_url_show" :src="baseInfo.contact_url_show"></el-image> -->
          <ImageUpload
            :uploadImgUrl="uploadImgUrl"
            v-model:value="baseInfo.share_icon_show"
            @input="
              (res) => {
                this.imgSuccess('share_icon', res);
              }
            "
            :limit="1"
          >
            <!-- :extParams="{ appid: $store.getters.curMpInfo.appid }" -->
            <template #tip>
              <div class="el-upload__tip">
                只能上传jpg,png,jpeg,gif文件，且不超过500kb
              </div>
            </template>
          </ImageUpload>
          <span>支持png、jpeg、jpg,gif格式</span>
          <!-- </el-form-item> -->
          <!-- </template> -->
        </el-form-item>
        <el-form-item
          prop="share_title"
          :label-width="labelWidth"
          label="公众号分享标题"
        >
          <el-input
            placeholder="请输入，将显示在公众号端分享标题"
            v-model="baseInfo.share_title"
          ></el-input>
        </el-form-item>
        <el-form-item
          prop="share_desc"
          :label-width="labelWidth"
          label="公众号分享描述"
        >
          <el-input
            placeholder="请输入，将显示在公众号端分享描述"
            v-model="baseInfo.share_desc"
          ></el-input>
        </el-form-item>
        <el-form-item
          prop="recharge_tip"
          :label-width="labelWidth"
          label="我的页面充值文案"
        >
          <el-input
            placeholder="请输入，将显示在公众号端我的页面中"
            v-model="baseInfo.recharge_tip"
          ></el-input>
        </el-form-item>
        <el-form-item
          prop="apply_rate"
          :label-width="labelWidth"
          label="提现费率"
        >
          <el-input
            v-model="baseInfo.apply_rate"
            placeholder="请输入提现费率，例如：输入1就是1%"
          >
            <template #append>%</template>
          </el-input>
        </el-form-item>
        <el-form-item
          style="height: 200px"
          prop="second_rate"
          :label-width="labelWidth"
          label="提现说明"
          ><Editor
            v-if="richStr"
            v-model:value="richStr"
            @updateValue="getMsg"
          ></Editor>
          <Editor v-else v-model:value="richStr" @updateValue="getMsg"></Editor>
          <!-- <Editor
            style="height: 150px"
            v-model="baseInfo.apply_with_text"
          ></Editor> -->
        </el-form-item>
        <el-form-item
          style="height: 200px"
          prop="second_rate"
          :label-width="labelWidth"
          label="隐私政策"
          ><Editor
            v-if="richStr2"
            v-model:value="richStr2"
            @updateValue="getMsg2"
          ></Editor>
          <Editor
            v-else
            v-model:value="richStr2"
            @updateValue="getMsg2"
          ></Editor>
          <!-- <Editor
            style="height: 150px"
            v-model="baseInfo.apply_with_text"
          ></Editor> -->
        </el-form-item>
        <el-form-item
          label=""
          style="
            width: 100%;
            display: flex;
            justify-content: center;
            margin-top: 100px;
          "
        >
          <el-button
            style="margin: 0 auto"
            @click="submit"
            type="success"
            v-hasPermi="['member:mpConfig:changeMpConfig']"
            >提交</el-button
          >
          <!-- v-hasPermi="['api:mpManage:changeMpConfig']" -->
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
const baseUrl =
  import.meta.env.VITE_APP_ENV == "development"
    ? import.meta.env.VITE_APP_BASE_API
    : window.location.origin;
import ImgUpload from "@/components/ImageUpload";
import { getMpConfig, changeMpConfig } from "@/api/mpManage/mpConfig";
import { uploadImgUrl } from "@/api/mpManage/mpUpload";

export default {
  name: "mpSet",
  components: {
    ImgUpload,
  },
  data() {
    return {
      richStr2: "",
      richStr: "",
      uploadImgUrl,
      baseInfo: {
        contact_url: "",
        follow_url: "",
      },
      labelWidth: "160px",
      // baseInfoRules: {
      //   contact_url: [{ required: true, message: "请选择" }],
      //   expire_seconds: [
      //     { required: true, message: "请输入", trigger: "blur" },
      //   ],
      // },
    };
  },
  computed: {},
  created() {
    this.init();
  },
  mounted() {},
  methods: {
    init() {
      this.getInfo();
    },
    async getInfo() {
      const { data } = await getMpConfig();
      if (data) {
        if (data.contact_url) {
          data.contact_url_show = baseUrl + "/" + data.contact_url;
        }
        if (data.follow_url) {
          data.follow_url_show = baseUrl + "/" + data.follow_url;
        }
        if (data.share_icon) {
          data.share_icon_show = baseUrl + "/" + data.share_icon;
        }
        this.baseInfo = data;
        this.richStr = this.baseInfo.apply_text;
        this.richStr2 = this.baseInfo.ys_text;
        // this.$nextTick(()=>{
        //     this.richStr = this.baseInfo.apply_text;
        // })
        console.log(111, this.richStr);
      }
    },
    imgSuccess(type, res) {
      console.log("res", res);
      if (res.code != 200) {
        // this.$message.error("上传失败");
        return false;
      }
      if (type == "follow") {
        this.baseInfo.follow_url_show = baseUrl + "/" + res.data.url;
        this.baseInfo.follow_url = res.data.url;
      }
      if (type == "contact") {
        this.baseInfo.contact_url_show = baseUrl + "/" + res.data.url;
        this.baseInfo.contact_url = res.data.url;
      }
      if (type == "share_icon") {
        this.baseInfo.share_icon_show = baseUrl + "/" + res.data.url;
        this.baseInfo.share_icon = res.data.url;
      }
    },
    getMsg(val) {
      this.richStr = val;
      //   this.baseInfo.apply_text = val;
    },
    getMsg2(val) {
      this.richStr2 = val;
      //   this.baseInfo.apply_text = val;
    },
    remove(type) {
      this.$set(this.baseInfo, type, "");
      this.$set(this.baseInfo, `${type}_show`, "");
    },
    submit() {
      this.$refs.baseInfo.validate(async (valid) => {
        if (valid) {
          console.log(this.baseInfo);
          const params = { ...this.baseInfo };
          params.apply_text = this.richStr;
          params.ys_text = this.richStr2;
          //   baseInfo.apply_text
          await changeMpConfig(params);
          this.$message.success("操作成功");
          this.getInfo();
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@media screen and (max-width: 500px) {
  :deep(.el-form-item .el-form-item__label) {
    width: 80px !important;
  }
}
</style>
